<template>
  <el-dialog
    :visible="visible"
    :width="dialogJson.width"
    :before-close="handleClose"
	:title="dialogJson.title"
	center
	:close-on-click-modal="false"
	  >
	<el-form :model="ruleForm" 
	:rules="rules" 
	ref="ruleForm" 
	label-width="100px" 
	class="demo-ruleForm"
	>
	
	<!-- 输入框 -->
	<template 
	v-if="inputData.length">
		<!-- inputData为数组，每一个元素是对象(inputItem)，每个元素第一个key为prop的名称 -->
	 <el-form-item 
	 v-for="(inputItem,indexInput) in inputData"
	  :key="indexInput.id"
	 :label="inputItem.label" 
	 :prop="Object.keys(inputItem)[0]"
	 >
	    <el-input v-model="ruleForm[inputItem.name]"
		:placeholder="inputItem.pla"
		clearable
				>
		</el-input>
	  </el-form-item>
	  </template>
	  
	  <!-- 密码框 -->
	  <template
	  v-if="passwordData.length"
	  >
	   <el-form-item 
	   v-for="(passwordItem,indexPassword) in passwordData"
	    :key="passwordItem.id"
	   :label="passwordItem.label" 
	   :prop="Object.keys(passwordItem)[0]"
	   
	   >
	      <el-input v-model="ruleForm[passwordItem.name]"
	  	     :placeholder="passwordItem.pla"
	  	    clearable
			 show-password
	  			>
	  			</el-input>
	    </el-form-item>
	    </template>
		
	  <!-- 下拉框 -->
	  <template
	  v-if="selectData.length"
	  >
	   <el-form-item 
	    v-for="(selectItem,indexSelect) in selectData" 
		:key="selectItem.id"
		:label="selectItem.label" 
		:prop="Object.keys(selectItem)[0]"
	   >
	      <el-select 
		  v-model="ruleForm[selectItem.name]" 
		  :placeholder="selectItem.pla"
		  style="width: 100%;"
		  clearable 
		  filterable
		  >
		  
	        <el-option 
			v-for="(optionItem,indexOpt) in selectItem.optionList" 
			:key="optionItem.id"
			:label="optionItem.label" 
			:value="optionItem.value">
			</el-option>
			
	      </el-select>
	    </el-form-item>
	  </template>
	  
	  <!-- 日期时间选择框 -->
	  <template
	  v-if="timeData.length"
	  >
	  <el-form-item 
	  v-for="(timeItem,indexDate) in timeData"
	  :key="timeItem.id"
	  :label="timeItem.label"
	  :prop="Object.keys(timeItem)[0]"
	  >
	      <el-col :span="11"
		  v-if="timeItem.nameDate"
		  >
		  <!-- 控制日期选择器的为其数据里面每个对象是否有nameDate（控制日期）timeDate（控制时间）可以同时出现或者之出现一个 -->
	        <el-date-picker type="date" 
			:placeholder="timeItem.plaDate" 
			v-model="ruleForm[timeItem.nameDate]"
			value-format="yyyy-MM-dd"
			 style="width: 100%;">
				
			</el-date-picker>
	      </el-col>
		   <el-col 
		   v-if="timeItem.nameDate&&timeItem.nameTime"
		   style="text-align: center;" :span="2">-</el-col>
	      <el-col :span="11"
		  v-if="timeItem.nameTime"
		  >
	        <el-time-picker :placeholder="timeItem.plaTime"
			 v-model="ruleForm[timeItem.nameTime]"
			 style="width: 100%;">
				
			</el-time-picker>
	      </el-col>
	    </el-form-item>
		</template>
		
	  <!-- switch开关 -->
	  <template
	  v-if="switchData.length"
	  >
	   <el-form-item 
	   v-for="(switchItem,indexSwitch) in switchData" 
	   :key="switchItem.id"
	   :label="switchItem.label"
	   >
	   <el-tooltip 
	   :content="ruleForm[switchItem.name]+' '" 
	   placement="top">
	      <el-switch 
		  v-model="ruleForm[switchItem.name]"
		  active-value="true"
		  inactive-value="false"
		  ></el-switch>
		  </el-tooltip>
	    </el-form-item>
	  </template>
	  
	  <!-- 计数器 -->
	  <template
	  v-if="inputNumberData.length"
	  >
	  <el-form-item
	 v-for="(inputNumberItem,indexInputNum) in inputNumberData"
	 :key="inputNumberItem.id"
			:label="inputNumberItem.label"
			:prop="Object.keys(inputNumberItem)[0]"
				  >
		    <el-input-number 
			 :min="inputNumberItem.min" 
			 :max="inputNumberItem.max" 
			v-model="ruleForm[inputNumberItem.name]"
			>
			</el-input-number>
		 </el-form-item>
	  </template>
	  
	  <!-- 多选框 -->
	  <template 
	  v-if="checkboxData.length">
		  <el-form-item 
		  v-for="(checkboxGroupItem,indexcheckboxGroup) in checkboxData"
		  :key="checkboxGroupItem.id"
		  :label="checkboxGroupItem.label" 
		  :prop="Object.keys(checkboxGroupItem)[0]"
		  >
		  <!-- checkboxGroupItem是对象，里面checkboxList为数组 ，该数组每一个元素是对象-->
		      <el-checkbox-group 
			  v-model="ruleForm[checkboxGroupItem.name]"
			 
			  >
		        <el-checkbox 
				v-for="(checkboxItem,indexCheck) in checkboxGroupItem.checkboxList"
				:key="checkboxItem.id"
				:label="checkboxItem.label" :name="checkboxItem.name"
				></el-checkbox>
		      </el-checkbox-group>
		    </el-form-item>
	  </template>
	  
	  <!-- 单选框 -->
	  <template
	  v-if="radioData.length"
	  >
	 
	   <el-form-item 
	   v-for="(radioGroupItem,indexradioGroup) in radioData"
	   :key="radioGroupItem.id"
	   :label="radioGroupItem.label" 
	   :prop="Object.keys(radioGroupItem)[0]"
	  
	   >
	      <el-radio-group v-model="ruleForm[radioGroupItem.name]"
				  >
	        <el-radio
			 v-for="(radioItem,indexRadio) in radioGroupItem.radioList"
			 :key="radioItem.id"
			:label="radioItem.label"
			></el-radio>
	      </el-radio-group>
	    </el-form-item>
	  </template>
	  
	  <!-- 文本框 -->
	  <template
	  v-if="textareaData.length"
	  >
	  <el-form-item 
	  v-for="(textareaItem,indexTextarea) in textareaData"
	  :key="textareaItem.id"
	  :label="textareaItem.label" 
	  :prop="Object.keys(textareaItem)[0]">
	      <el-input type="textarea" 
		  v-model="ruleForm[textareaItem.name]"
		  :placeholder='textareaItem.pla'
		  clearable
		  >
		  </el-input>
	    </el-form-item>
	  </template>
    <slot name="footer">
       <el-form-item
		style="margin-top: 30px;
		margin-left: 80px;
		"
		>
          <el-button type="primary" @click="submitForm('ruleForm')">{{buttonSub}}</el-button>
          <el-button @click="resetForm('ruleForm')">{{buttonRes}}</el-button>
        </el-form-item>
    </slot>
	</el-form>
  </el-dialog>
</template>

<script>
	
	export default {
	  
		 props:{
			 // 控制对话框的出现
			 visible:{
				 type:Boolean,
				 default:false
			 },
			 // 对话框表单数据，有输入框，文本框，开关，下拉框，
			 // 密码框，单选多选框，日期选择框
			 // 传入数据格式如下
			 //该json每个对象的第一个属性的key要与name的value相同，否则没有验证
			 //dialogFormJson；{
				 // inputData:[],
				 // passwordData:[],
				 // timeData:[],
				 // selectData:[],
				 // switchData:[],
				 // checkboxData:[],
				 // radioData:[],
				 // textareaData:[], }
			 dialogFormJson:{
				 type:Object,
				 required:true
			 },
			 //对话框宽度和标题
			 // 父组件传入的格式如下
			 // dialogJson:{
			 // 			 title:'haha',
			 // 			 width:'40%',
			 // 			 buttonSubmit:'haha',
			 // 			 buttonReset:'222'
			 // }
			 dialogJson:{
				 type:Object,
				 default:{
					 title:'',
					 width:'40%',
					 buttonSubmit:'提交',
					buttonReset:'重置'
				 }
			 }
		 },
	  data(){
		  return{
			  buttonSub:this.dialogJson.buttonSubmit,
			  buttonRes:this.dialogJson.buttonReset,
			  formJson:this.dialogFormJson||[],
			  // 输入框数据
			  inputData:this.dialogFormJson.inputData||[],
			  // 密码框数据
			  passwordData:this.dialogFormJson.passwordData||[],
			  // 时间日期框数据
			  timeData:this.dialogFormJson.timeData||[],
			  // 下拉框数据
			  selectData:this.dialogFormJson.selectData||[],
			  // switch开关数据
			  switchData:this.dialogFormJson.switchData||[],
			  // 计数器数据
			  inputNumberData:this.dialogFormJson.inputNumberData||[],
			  // 多选框数据
			  checkboxData:this.dialogFormJson.checkboxData||[],
			  // 单选框数据
			  radioData:this.dialogFormJson.radioData||[],
			  // 文本框数据
			  textareaData:this.dialogFormJson.textareaData||[],
			  ruleForm:{
				  
			  },
			  rules:{
				  
			  }
		  }
	  },
	  created() {
	  },
	  methods: {
	     handleClose() {	 
	         this.$emit("update:visible", false);
			 setTimeout(()=>{
				 this.$refs['ruleForm'].resetFields();
			 })
	       },
		   //自定义验证
		   submitForm(formName) {
		           this.$refs[formName].validate((valid) => {
					   let data={
						   flag:false,
						   form:this.ruleForm
					   }
		             if (valid) {
						 // 验证规则成功后,如果要发送请求等后续操作在
						 // 父组件页面完成
						 // 父组件监听subForm事件,得到验证完后的数据
						 data.flag=true
		               this.$emit('subForm',data)
					setTimeout(()=>{
						data.flag=false
					})
		             } else {
						 this.$emit('subForm',data)
						 console.log(valid)
		               return false;
		             }
		           });
				   console.log(this.ruleForm)
		         },
		         resetForm(formName) {
		           this.$refs[formName].resetFields();
				   // 把日期时间置空
				   if(this.timeData){
					   for(let item of this.timeData)
					   {
						   if(item.nameDate)this.ruleForm[item.nameDate]=''
						   if(item.nameTime)this.ruleForm[item.nameTime]=''
					   }
				   }
				  
		         }
		   },
		   mounted() {
			for(let i in this.dialogFormJson){
				// formJson是一个对象,里面的元素都是数组,数组里面每个元素是对象,
				// 该数组第一个对象为验证规则,验证规则为数组
				for(let j=0;j<this.dialogFormJson[i].length;j++){
					// 设置要提交的表单元素的key
					// 开关设置的key是Boolean,多选框的key为空数组，其余的为空字符串
					let obj=this.dialogFormJson[i][j]
					if(i=='switchData'){
						this.$set(this.ruleForm,obj.name,false)
					}else if(i=='checkboxData'){
						this.$set(this.ruleForm,obj.name,[])
					}else if(i=='timeData'){
						if(obj.nameDate)this.$set(this.ruleForm,obj.nameDate,'')
						if(obj.nameTime)this.$set(this.ruleForm,obj.nameTime,'')
					}else{
					this.$set(this.ruleForm,obj.name,'')	
					}
					// 设置验证表单rules的key和value
					if(i!='switchData'){
						this.$set(this.rules,Object.keys(obj)[0]
						,Object.values(obj)[0])
					}
				}
			}
			console.log(this.ruleForm)
		   }
		   }

</script>

<style scoped>

</style>
